<template>
  <div>
    <form @submit.prevent="fn">
      <label>姓名：</label>
      <input type="text" v-model="uname" /><br /><br />

      <label>年龄：</label>
      <input type="number" v-model="age" /><br /><br />

      <label>身高：</label>
      <input type="text" v-model.number="lengt" />(米)<br /><br />

      <label>体重：</label>
      <input type="number" v-model="weight" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" v-model="sick" /><br /><br />

      <button>诊断</button>
    </form>
    <!-- this.weight / (this.length * this.length) -->
    <!-- 18.5 23.9 
     weight / (length * length) > 18.5 && weight / (length * length) < 23.9? '健康': '不健康'
    -->
    <p v-if="res < 18.5 && res > 0">患者{{ uname }} 的诊断结果：体重过轻</p>
    <p v-else-if="res >= 18.5 && res <= 23.9">
      患者{{ uname }} 的诊断结果：体重正常
    </p>
    <p v-else-if="res > 23.9">患者{{ uname }} 的诊断结果：体重过重</p>
    <p v-else>患者{{ uname }} 的诊断结果:</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: '',
      age: '',
      lengt: '',
      weight: '',
      sick: '',
      res: '无',
    }
  },
  methods: {
    fn() {
      // if (
      //   this.weight / (this.length * this.length) < 18.5 &&
      //   this.weight / (this.length * this.length) > 0
      // ) {
      //   return (this.res = '过轻')
      // } else if (
      //   this.weight / (this.length * this.length) >= 18.5 &&
      //   this.weight / (this.length * this.length) <= 23.9
      // ) {
      //   return (this.res = '正常')
      // } else {
      //   return (this.res = '过重')
      // }
      this.res = this.weight / (this.lengt * this.lengt)
    },
  },
}
</script>
